import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
import FoldingAnimation from "./FoldingAnimation.js"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			offreact:true,
			overshujuku:false,
			showOffSign:false,
			skip:0,
			username:"打发",
			sign:"了肯德基发就凉快圣诞节的实例看风景阿萨德； 的方式来看敬爱为附近东方斯卡",
			signAll:"了肯德基发就凉快圣诞节的实例看风景阿萨德； 的方式来看敬爱为附近东方斯卡拉骄傲位附近第三方可骄傲违法打扫房间爱神的箭覅欧文打发时间哦按文件放静安寺到发尾激发",
			avatar:"打发.jpg",
			memberData:{
				//成员数据模板
				span1:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span2:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span3:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span4:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span5:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span6:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"},
				span7:{avatar:"代斌.jpg",username:"代斌",sign:"收拾好心情，把知识都打包一遍，悠然享受一个人的早餐。春光无限好，怎能轻易辜负。一人食也要认真对待"}
			}
		}
	}

	componentWillMount(){
		//得到成员的一些信息
		let set=()=>this.setMemberDidAjax(this.state.skip,"h")
		set()
		//绑定搜索的回车键盘事件
		$(window).on("keyup",(e)=>this.enter(e))
	}

	//得到成员信息，上一页下一页都在这完成
	setMemberDidAjax(skip,prev){
		if(skip<0)
			return ;
		let This=this
		if(!(prev==="pre")){
			if(This.state.overshujuku)
				return ;
		}
		$.post("/memberAjax",{
			"skip":skip
		},function(data){
				if(data==="-1"){
					return ;
				}
				else{
					let stringmember=JSON.stringify(This.state.memberData)
					let member=JSON.parse(stringmember)
					let memberData=data.memberData.concat()
					for(var i=0;i<memberData.length;i++){
						member["span"+(i+1)]=memberData[i]
					}
					This.setState(()=>({
						memberData:member,
						offreact:true,
						skip:skip,
						username:data.username,
						sign:data.sign.slice(0,36),
						signAll:data.sign,
						avatar:data.avatar,
					}))
					if(memberData.length<7){
						This.setState({
							overshujuku:true
						})
						//这是防止数据库已经到底了，而skip一直在加，那么上一页的时候内容就不会变
					}else{
						This.setState({
							overshujuku:false
						})
					}
					This.animation()
					return ;
				}
		})
	}

	//点击搜索按成员名查找该成员
	seach(){
		let username=this.input.value.trim()
		this.input.value=" "
		this.replaceFistSpan(this,username)	
	}

	//按回车进行查找
	enter(e){
		if(e.keyCode===13){
			let username=this.input.value.trim()
			this.input.value=" "
			this.replaceFistSpan(this,username)	
		}
	}
	//搜索出来的数据替换第一个span
	replaceFistSpan(This,username){
		$.post("/memberSeachAjax",{
			"username":username
		},function(data){
				if(data==="-1"){
					alert("服务器错误")
					return ;
				}
				else{
					if(data.username!==username){
						alert("你敢换一个用户名我就敢给你找到")
						return ;
					}
					let memberDataString=JSON.stringify(This.state.memberData)
					let memberData=JSON.parse(memberDataString)
					memberData.span1=data
					This.setState((prevstate)=>{
						return ({
							memberData:memberData
						})
					});
					This.animation()
					return ;
				}
		})
	}

	//让装成员信息的盒子自适应
	componentDidMount(){
		//主页按钮的动画
		$(".href-btn").find("div").hover(function(){
			$(this).addClass("rubberBand")
		},function(){
			$(this).removeClass("rubberBand")
		})

		let el=$(".content-left-jour")
		let height=$(window).height()-90  //90是页码的高和搜索框的高
		el.height(height+"px")
		$(window).on("resize",function(){
			let el=$(".content-left-jour")
			let height=$(window).height()-90  //90是页码的高和搜索框的高
			el.height(height+"px")
		})
		this.animation()
	}
	//折纸动画
	animation(){
		var aDiv=$("#wrap div")
		aDiv.removeClass("show-animation")
		var tim=null;
		var i=0;
		clearInterval(tim);
		tim=setInterval(function(){
				$(aDiv[i]).addClass("show-animation")
				i++;
				if(i===aDiv.length)clearInterval(tim);
		},200);
	}

	//点击显示修改签名框动画
	setSign(){
		if(!this.state.showOffSign){
			$(this.hr).fadeIn(300)
			$(this.offsign).slideDown(300)
		}else{
			$(this.hr).fadeOut(400)
			$(this.offsign).slideUp(300)
		}
		this.setState({
			showOffSign:!this.state.showOffSign
		})
	}

	//显示全部sign
	showSignAll(){
		$(this.signAllEl).fadeIn(200)
	}

	//隐藏全部sign
	hideSignAll(){
		$(this.signAllEl).fadeOut(200)
	}

	//提交修改签名的ajax
	submitSign(){
		let This=this
		let textarea=$(this.textarea)
		let val=textarea.val()
		if(val.trim().length===0)
			return;
		let oldVal=this.state.sign
		textarea.val(" ")
		this.setSign()
		this.setState({
			sign:val.slice(0,36),
			signAll:val
		})
		$.post("/setSignAjax",{
			val:val
		},function(data){
			if(data==="-1"){
				alert("修改签名失败")
				This.setState({
					sign:oldVal
				})
			}
		})
	}
	render(){
		return (
			<div className="container-fluid container-full-screen">
				<div className="fixedbg"></div>
				<div className="href-btn">
					<div onClick={(e)=>window.location="/"} style={{cursor:"pointer"}} className="animated">
						HOME
					</div>
				</div>
				<div 
					className="content"
				>
					<div className="row">
							<div className="content-left col-lg-4 col-lg-push-1 col-md-4 col-md-push-1 col-sm-5  col-xs-5">
								<img className="img-thumbnail img-responsive" src={"/img/"+this.state.avatar} alt="大头像"/>
								<div className="content-left-username content-left-relief">{this.state.username}</div>
								<div className="content-left-relief content-left-sign">
									{this.state.sign}
									<span 
										style={{position:"relative",display:this.state.signAll.length>36?" ":"none"}}
										onMouseEnter={(e)=>this.showSignAll(e)}
										onMouseLeave={(e)=>this.hideSignAll(e)}
									>
										...
										<span ref={(signAllEl)=>this.signAllEl=signAllEl} className="sign-all-el">
											{this.state.signAll}
										</span>
									</span>
									&nbsp;&nbsp;&nbsp;
									<span 
										style={{cursor:"pointer",fontSize:"16px"}}
										onClick={(e)=>this.setSign(e)}
									>
											修改
									</span>
								</div>
								<hr ref={(hr)=>this.hr=hr} style={{display:"none"}}/>
								<div ref={(offsign)=>this.offsign=offsign} style={{width:"100%",height:"180px",display:"none"}}>
									<div id="placeholderarea">
										<textarea ref={(textarea)=>this.textarea=textarea} rows="7"  className="form-input form-control" placeholder="输入小伙伴username"></textarea>
									</div>
									<div className="full-left set-sign set-sign-parent" onClick={(e)=>this.submitSign(e)} >
										提交
									</div>
								</div>
							</div>
							<div style={{display:!this.state.offreact?"none":""}} className="content-left-jour col-lg-5 col-lg-push-5  col-md-5 col-md-push-5 col-sm-7 col-sm-push-5 col-xs-7 col-xs-push-5">
								{!this.state.offreact?" ":[<FoldingAnimation key="11" {...this.state.memberData} />]} 
							</div>
					</div>
				</div>
				<div style={{display:!this.state.offreact?"none":""}} id="seach" className="row">
					<div id="placeholder" className="col-lg-4 col-lg-push-5 visible-lg">
						<input ref={(input)=>this.input=input} type="text" placeholder="输入小伙伴username" className="form-control form-input"/>
					</div>
					<div className="col-lg-1 col-lg-push-5 visible-lg">
						<input 
							type="submit" 
							onClick={(e)=>this.seach()} 
							className="form-control form-input" 
							value="搜索"
						/>
					</div>
				</div>
				<div style={{display:!this.state.offreact?"none":" "}} className="row page">
					<div className="col-lg-5 col-lg-push-5 visible-lg">
						<p onClick={(e)=>this.setMemberDidAjax(this.state.skip-7,"pre")} style={{float:"left",cursor:"pointer"}}>上一页</p>
						<p onClick={(e)=>this.setMemberDidAjax(this.state.skip+7,"next")} style={{float:"right",cursor:"pointer"}}>下一页</p>
					</div>
				</div>
				
			</div>
		)
			
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));

//还原区
// src={"/img/"+this.state.avatar}   小头像和大头像



